<template>
  <div class="PartyPayment">
    <div class="bg_block">
      <div class="name">交费首页</div>
      <div class="card">
        <div class="userInfo">
          <div class="avatar">
            <img :src="photo" alt>
          </div>
          <div class="text">
            <p class="name">
              <span>{{name}}</span>
              <i>
                <img src="@as/img/gcd.png" alt>
                <span>{{party_posts}}</span>
              </i>
            </p>
            <p class="from">{{organization}}</p>
          </div>
        </div>
        <div class="nav">
          <div class="left" @click="toMessage">
            <p>
              交费提醒
              <i :class="(info_number.toString()).length>2?'tip large':'tip'" v-if="info_number">{{info_number | numthumbnail}}</i>
            </p>
            <p>交费日:每月{{start_time}}号-{{end_time}}号</p>
          </div>
          <div class="right" @click="toPayHistory">
            <p>交费历史</p>
            <p>已交党费{{total_misuse}}元</p>
          </div>
        </div>
      </div>
    </div>
    <div class="cuts">
      <img src="@as/img/cuts.png" alt>
    </div>
    <mu-button class="payBtn" flat @click="getPay">上交党费</mu-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      photo: '@as/img/avatar.png',
      name: '',
      organization: '',
      party_posts: '',
      id: '',
      organization_id: '',
      info_number: 18, // 未读消息
      total_misuse: 0, // 已交党费
      start_time: 0, // 缴费日开始
      end_time: 0 // 缴费日结束
    }
  },
  created () {
    // this.getCode()
    let userInfo = JSON.parse(Cookies.get('user_71ydj'))
    this.photo = userInfo.photo
    this.name = userInfo.name
    this.organization = userInfo.organization
    this.party_posts = userInfo.party_posts
    this.id = userInfo.id
    this.organization_id = userInfo.organization_id
    this.getPayList()
  },
  methods: {
    async getCode () { 
      // if(!window.localStorage.getItem('openId') ){
        // 非静默授权，第一次有弹框
        const code = this.getUrlParam('code') // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
        if (code == null || code === '') {
          var appid = 'wx0f4b73d12350c78f'
          var redirectUri = encodeURIComponent('https://bulid.71ydj.com/xwl/index.html?a=a')
          window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?' + 
            'appid=' + appid +
            '&redirect_uri=' + redirectUri +
            '&response_type=code&scope=snsapi_base&state=71y#wechat_redirect'
        } else {
          console.log(code)
          let params = { code: code }
          let res = await this.$api.pay.get_openID(params) //把code传给后台获取用户信息
          console.log(res.data,'openId')
          if (res.code === 200) {
            let code = res.data
            window.localStorage.setItem('openId', code)
          }
        }
      // }
    },
    getUrlParam: function (name) {
      var reg=new RegExp('(^|&)'+name+'=([^&]*)(&|$)')
      var r=window.location.search.substr(1).match(reg)
      if(r!=null) return unescape(r[2])
      return null
    },
    async getPay () {
      try {
        let params = {
          uid: JSON.parse(Cookies.get('user_71ydj')).id
        }
        const url = `applets/Pay/pay`
        let res = await this.$http.get(url, params)
        if (res.code === 200) {
          this.$router.push({ path: '/mine/PartyPayment/pay' })
        }
      } catch (e) {
        console.log('​catch -> e', e)
      }
    },
    async getPayList () {
      try {
        // 定义参数对象
        let params = {
          uid: this.id,
          org_id: this.organization_id
        }
        const url = `applets/Pay/pay_list`
        let res = await this.$http.get(url, params)
        this.$progress.done()
        if (res.code === 200) {
          this.info_number = res.data.info_number
          this.total_misuse = res.data.total_misuse
          this.start_time = res.data.remind_info.start_time
          this.end_time = res.data.remind_info.end_time
        }
      } catch (e) {
        console.log('​catch -> e', e)
      }
    },
    toPayHistory () {
      this.$router.push({ path: '/mine/PartyPayment/payHistory' })
    },
    toMessage () {
      this.$router.push({ path: '/mine/PartyPayment/message' })
    }
  },
  components: {

  }
}
</script>
<style lang="scss" scoped>
.PartyPayment{
  padding-bottom: 140px;
  width: 100%;
}
.bg_block {
  > .name {
    font-size: 20px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 20px;
    margin-bottom: 18px;
  }
  .card {
    .userInfo {
      .avatar {
        width: 60px;
        height: 60px;
        margin-right: 12px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .text {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        p {
          margin: 0;
        }
        .name {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-family: PingFang-SC-Medium;
          font-weight: bold;
          color: rgba(51, 51, 51, 1);
          height: 22px;
          line-height: 22px;
          i {
            img {
              width: 12.5px;
              height: 12.5px;
            }
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding: 0 8px;
            background: rgba(235, 235, 235, 1);
            border-radius: 11px;
            line-height: 22px;
            font-size: 10px;
            font-family: PingFang-SC-Medium;
            font-weight: 500;
            color: rgba(245, 135, 100, 1);
            font-style: normal;
            margin-left: 8px;
          }
        }
        .from {
          font-size: 13px;
          font-family: PingFang-SC-Medium;
          font-weight: 500;
          color: rgba(102, 102, 102, 1);
        }
      }
      height: 60px;
      width: 100%;
      display: flex;
      margin-bottom: 32px;
    }
    .nav {
      height: 88px;
      display: flex;
      justify-content: space-between;
      .tip {
        text-align: center;
        position: absolute;
        right: -12px;
        top: -12px;
        width: 16px;
        height: 16px;
        line-height: 16px;
        font-style: normal;
        background: rgba(217, 49, 40, 1);
        border-radius: 50%;
        font-size: 9px;
        font-family: PingFang-SC-Medium;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
      }
      .tip.large{
        width: 25px;
        height: 15px;
        border-radius: 5px;
      }
      div {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        p{
          margin: 0;
          margin-bottom: 8px;
        }
        p:first-of-type {
          position: relative;
          font-size: 16px;
          font-family: PingFang-SC-Medium;
          font-weight: bold;
          color: rgba(51, 51, 51, 1);
        }
        p:last-of-type {
          font-size: 13px;
          font-family: PingFang-SC-Medium;
          font-weight: 500;
          color: rgba(153, 153, 153, 1);
        }
      }
    }
    box-sizing: border-box;
    padding: 16px;
    width: 343px;
    height: 213px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 7px 12px 0px rgba(204, 155, 139, 0.25);
    border-radius: 4px;
  }
  height: 250px;
  width: 100%;
  box-sizing:border-box;
  background: url(../../../../assets/img/pay_home_bg.png) no-repeat;
  background-size: 100% 188px;
  padding: 31px 0 0 17px;
  margin-bottom: 84px;
}
.cuts {
  width: 182px;
  height: 126px;
  margin: 0 auto;
  margin-bottom: 22px;
  img {
    width: 100%;
    height: 100%;
  }
}
.payBtn {
  display: block;
  text-align: center;
  width: calc(100% - 32px);
  height: 44px;
  line-height: 44px;
  background: rgba(235, 77, 68, 1);
  border-radius: 4px;
  font-size: 18px;
  font-family: PingFang-SC-Medium;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  margin: 0 auto;
  padding: 0;
}
</style>
